<?php require_once __DIR__.'/../../utils/checkTokenUtils.php';
session_start();
$username=$_SESSION['user']['username'];
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $title ?? '图书管理系统' ?></title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">

    <!-- 自定义 Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',  // 主色调：深蓝色
                        secondary: '#FF7D00', // 辅助色：橙色
                        neutral: {
                            100: '#F5F7FA',
                            200: '#E4E7ED',
                            300: '#C0C6CF',
                            400: '#909399',
                            500: '#606266',
                            600: '#303133',
                            700: '#1E1E1E',
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 4px 12px rgba(0, 0, 0, 0.08)',
                        'card-hover': '0 8px 24px rgba(0, 0, 0, 0.12)',
                    }
                },
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .sidebar-link {
                @apply flex items-center px-4 py-3 text-neutral-500 hover:bg-primary/5 hover:text-primary rounded-lg transition-all duration-200;
            }
            .sidebar-link.active {
                @apply bg-primary/10 text-primary font-medium;
            }
            .btn-primary {
                @apply bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 shadow-sm hover:shadow;
            }
            .btn-secondary {
                @apply bg-white border border-neutral-200 hover:bg-neutral-50 text-neutral-600 font-medium py-2 px-4 rounded-lg transition-all duration-200;
            }
            .card {
                @apply bg-white rounded-xl shadow-card hover:shadow-card-hover transition-all duration-300 overflow-hidden;
            }
        }

        #successNotice, #errorNotice {
            transition: opacity 0.3s ease-in-out;
            opacity: 1;
        }
    </style>
</head>
<body class="font-inter bg-neutral-100 text-neutral-600 min-h-screen flex flex-col">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-sm sticky top-0 z-50">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between h-16">
            <!-- Logo -->
            <div class="flex items-center">
                <a href="../../../public/index.php" class="flex items-center">
                    <i class="fa-solid fa-book-open text-primary text-2xl mr-2"></i>
                    <span class="text-xl font-bold text-neutral-700">图书管理系统</span>
                </a>
            </div>

            <!-- 导航菜单 -->
            <nav class="hidden md:flex space-x-8">
                <a href="../books/Books.php" class="text-neutral-600 hover:text-primary font-medium transition-colors duration-200">图书列表</a>
                <a href="../categories/Categories.php" class="text-neutral-600 hover:text-primary font-medium transition-colors duration-200">分类管理</a>
                <a href="../borrow/borrow.php" class="text-neutral-600 hover:text-primary font-medium transition-colors duration-200">借阅记录</a>
            </nav>

            <!-- 用户菜单容器 -->
            <div class="relative ml-3">
                <!-- 触发按钮 -->
                <button id="user-menu-button" class="flex items-center focus:outline-none">
                    <img class="h-8 w-8 rounded-full object-cover" src="https://picsum.photos/200/200?random=1" alt="用户头像">
                    <span class="ml-2 text-sm font-medium text-neutral-700 hidden md:block"><?= $username ?? '管理员' ?></span>
                    <i class="fa-solid fa-angle-down ml-1 text-neutral-400 transition-transform duration-200"></i>
                </button>

                <!-- 下拉菜单 -->
                <div id="user-menu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 ring-1 ring-black ring-opacity-5 focus:outline-none origin-top-right transition-transform duration-200 ease-out">
<!--                    <a href="#" class="block px-4 py-2 text-sm text-neutral-700 hover:bg-gray-100">-->
<!--                        <i class="fa-solid fa-lock mr-2 w-4 text-center"></i>-->
<!--                        修改密码-->
<!--                    </a>-->
                    <a href="../login/logout.php" class="block px-4 py-2 text-sm text-neutral-700 hover:bg-gray-100">
                        <i class="fa-solid fa-arrow-right-from-bracket mr-2 w-4 text-center"></i>
                        退出登录
                    </a>
                </div>
            </div>

</header>

<div class="flex flex-1 overflow-hidden">
    <!-- 侧边栏 -->
    <aside id="sidebar" class="w-64 bg-white border-r border-neutral-200 hidden lg:block transition-all duration-300 ease-in-out transform">
        <div class="p-4">
            <h3 class="text-xs font-semibold text-neutral-400 uppercase tracking-wider mb-3">图书分类</h3>
            <nav class="space-y-1">
                <!-- 所有图书链接 -->
                <a href="../books/Books.php" class="sidebar-link <?= basename($_SERVER['PHP_SELF']) === 'Books.php' ? 'active' : '' ?>">
                    <i class="fa-solid fa-book mr-3"></i>
                    <span>所有图书</span>
                </a>

                <?php
                require_once __DIR__.'/../../utils/MysqlDBUtils.php';
                use utils\MysqlDBUtils;
                $db = new MysqlDBUtils();
                $sql = "SELECT * FROM book_category";
                $categories = $db->prepareQuery($sql);
                // 获取当前访问的分类 ID（从 URL 参数中读取）
                $currentCategoryId = isset($_GET['category_id']) ? intval($_GET['category_id']) : 0;
                if ($categories && is_array($categories)):
                    foreach ($categories as $category):
                        // 判断当前分类 ID 是否与链接的分类 ID 匹配
                        $isActive = $category['id'] == $currentCategoryId;
                        ?>
                        <a href="../books/BookCategory.php?category_id=<?= $category['id'] ?>" class="sidebar-link <?= $isActive ? 'active' : '' ?>">
                            <i class="fa-solid fa-book-tanakh mr-3"></i>
                            <span><?= htmlspecialchars($category['category_name']) ?></span>
                        </a>
                    <?php
                    endforeach;
                else:
                    ?>
                    <p class="text-gray-500">暂无分类数据</p>
                <?php endif; ?>
            </nav>

            <div class="mt-8 pt-6 border-t border-neutral-200">
                <h3 class="text-xs font-semibold text-neutral-400 uppercase tracking-wider mb-3">管理功能</h3>
                <nav class="space-y-1">
                    <a href="../borrow/borrow.php" class="sidebar-link <?= basename($_SERVER['PHP_SELF']) === 'borrow.php' ? 'active' : '' ?>">
                        <i class="fa-solid fa-book-open-reader mr-3"></i>
                        <span>借阅管理</span>
                    </a>
                    <a href="../users/Users.php" class="sidebar-link <?= basename($_SERVER['PHP_SELF']) === 'Users.php' ? 'active' : '' ?>">
                        <i class="fa-solid fa-users mr-3"></i>
                        <span>用户管理</span>
                    </a>
                    <a href="../categories/Categories.php" class="sidebar-link <?= basename($_SERVER['PHP_SELF']) === 'Categories.php' ? 'active' : '' ?>">
                        <i class="fa-solid fa-folder-tree mr-3"></i>
                        <span>分类管理</span>
                    </a>
                    <a href="#" class="sidebar-link">
                        <i class="fa-solid fa-ellipsis mr-3"></i>
                        <span>更多功能，敬请期待</span>
                    </a>
<!--                    <a href="#" class="sidebar-link">-->
<!--                        <i class="fa-solid fa-chart-line mr-3"></i>-->
<!--                        <span>统计报表</span>-->
<!--                    </a>-->
<!--                    <a href="#" class="sidebar-link">-->
<!--                        <i class="fa-solid fa-cog mr-3"></i>-->
<!--                        <span>系统设置</span>-->
<!--                    </a>-->
                </nav>
            </div>
        </div>
    </aside>

    <!-- 主内容区 -->
    <main class="flex-1 overflow-y-auto bg-neutral-100 p-6">
        <div class="container mx-auto">
            <!-- 页面标题 -->
            <div class="mb-6">
<!--                <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral-700">--><?php //= $title ?? '图书管理系统' ?><!--</h1>-->
<!--                <p class="text-neutral-500 mt-1">--><?php //= $description ?? '管理图书、借阅和用户的系统' ?><!--</p>-->
            </div>

            <!-- 内容区域 -->
            <div class="bg-white rounded-xl shadow-sm p-6">
                <?= $content ?? '内容区域' ?>
            </div>
        </div>
    </main>
</div>

<!-- 页脚 -->
<footer class="bg-white border-t border-neutral-200 py-6">
    <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="mb-4 md:mb-0">
                <p class="text-neutral-500 text-sm">&copy; 2025 图书管理系统. 保留所有权利.</p>
            </div>
            <div class="flex space-x-6">
                <a href="#" class="text-neutral-500 hover:text-primary transition-colors duration-200">
                    <i class="fa-solid fa-question-circle mr-1"></i> 帮助中心
                </a>
                <a href="#" class="text-neutral-500 hover:text-primary transition-colors duration-200">
                    <i class="fa-solid fa-file-text mr-1"></i> 使用条款
                </a>
                <a href="#" class="text-neutral-500 hover:text-primary transition-colors duration-200">
                    <i class="fa-solid fa-shield mr-1"></i> 隐私政策
                </a>
            </div>
        </div>
    </div>
</footer>

<!-- JavaScript -->
<script>
    // 侧边栏折叠/展开（移动端）
    document.addEventListener('DOMContentLoaded', function() {
        const toggleSidebar = document.getElementById('toggle-sidebar');
        const sidebar = document.getElementById('sidebar');

        if (toggleSidebar && sidebar) {
            toggleSidebar.addEventListener('click', function() {
                sidebar.classList.toggle('-translate-x-full');
            });
        }
    });

    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            const targetElement = document.querySelector(targetId);

            if (targetElement) {
                targetElement.scrollIntoView({
                    behavior: 'smooth'
                });
            }
        });
    });

    document.addEventListener('DOMContentLoaded', function() {
        const menuButton = document.getElementById('user-menu-button');
        const userMenu = document.getElementById('user-menu');
        const arrowIcon = menuButton.querySelector('i');

        // 点击按钮切换菜单显示
        menuButton.addEventListener('click', (e) => {
            e.stopPropagation();
            const isOpen = userMenu.classList.toggle('hidden');
            arrowIcon.style.transform = isOpen ? '' : 'rotate(180deg)'; // 箭头旋转动画
        });

        // 点击外部区域关闭菜单
        document.addEventListener('click', (e) => {
            if (!userMenu.contains(e.target) && !menuButton.contains(e.target)) {
                userMenu.classList.add('hidden');
                arrowIcon.style.transform = '';
            }
        });
    });

    document.addEventListener('DOMContentLoaded', function() {
        // 自动隐藏成功提示（3秒后）
        const successNotice = document.getElementById('successNotice');
        if (successNotice) {
            setTimeout(() => {
                successNotice.style.opacity = '0';
                setTimeout(() => {
                    successNotice.remove(); // 完全隐藏后移除元素
                }, 300); // 等待过渡动画完成（0.3秒）
            }, 3000); // 显示3秒后开始隐藏
        }

        // 自动隐藏错误提示（3秒后）
        const errorNotice = document.getElementById('errorNotice');
        if (errorNotice) {
            setTimeout(() => {
                errorNotice.style.opacity = '0';
                setTimeout(() => {
                    errorNotice.remove();
                }, 300);
            }, 3000);
        }
    });
</script>
</body>
</html>